// ** React Imports
import { Fragment, useState } from 'react'

// ** MUI Imports
import Box from '@mui/material/Box'
import Grid from '@mui/material/Grid'
import Button from '@mui/material/Button'
import Select from '@mui/material/Select'
import MenuItem from '@mui/material/MenuItem'
import TextField from '@mui/material/TextField'
import Typography from '@mui/material/Typography'
import Paper from '@mui/material/Paper'
import { styled } from '@mui/material/styles'
import {
  Description, // 输入主题与要求
  CloudUpload, // 导入外部资料
  TextFields, // 输入文本
  UploadFile, // 上传文件
  Link, // 输入网页地址
  List, // 导入大纲
  KeyboardArrowDown,
  KeyboardArrowRight,
  PlayCircleFilled, // 立即生成
} from "@mui/icons-material";

// 自定义样式组件
const SectionPaper = styled(Paper)(({ theme }) => ({
  padding: theme.spacing(3),
  marginBottom: theme.spacing(3),
  boxShadow: '0 2px 8px rgba(42, 92, 170, 0.2)',
  borderRadius: '8px',
  transition: 'box-shadow 0.3s ease',
  '&:hover': {
    boxShadow: '0 4px 12px rgba(42, 92, 170, 0.3)'
  }
}));

const StepOneInputData = ({ setActiveStep, setInputData }: any) => {
  // ** States

  // 状态管理
  const [selectedOption, setSelectedOption] = useState("inputTopic"); // 默认选中 "输入主题与要求"
  const [importOption, setImportOption] = useState("inputText"); // 默认选中 "输入文本"
  const [inputText, setInputText] = useState("2025年酒店行业发展报告"); // 输入框内容
  const [showMoreOptions, setShowMoreOptions] = useState(false); // 是否显示更多生成要求
  const [moreOptions, setMoreOptions] = useState({ moreRequirement: "", language: "zh-CN", outlineLength: "regular" }); // 更多生成要求的内容

  // 处理选项切换
  const handleOptionChange = (option: any) => {
    setSelectedOption(option);
  };

  // 处理导入选项切换
  const handleImportOptionChange = (option: any) => {
    setImportOption(option);
  };

  // 处理更多生成要求的显示/隐藏
  const toggleMoreOptions = () => {
    setShowMoreOptions(!showMoreOptions);
  };

  // 处理立即生成按钮点击
  const handleGenerateOutline = () => {
    console.log("生成 PPTX 的参数：", {
      selectedOption,
      importOption,
      inputText,
      moreOptions,
    });
    setInputData((prevState: any) => ({...prevState, selectedOption, importOption, inputText, moreOptions}))
    setActiveStep((prevActiveStep: number) => prevActiveStep + 1)
  };

  return (
    <Box sx={{ p: 2 }}>
      {/* 标题 */}
      <Typography 
        variant="h5" 
        component="h2" 
        sx={{ 
          mb: 4, 
          color: '#2A5CAA', 
          fontWeight: 'bold',
          textAlign: 'center'
        }}
      >
        创建您的PPTX演示文稿
      </Typography>

      <SectionPaper>
        {/* 第一行：两个按钮 */}
        <Box sx={{ display: "flex", gap: 2, mb: 3 }}>
          <Button
            variant={selectedOption === "inputTopic" ? "contained" : "outlined"}
            sx={{
              ...(selectedOption === "inputTopic" && {
                background: 'linear-gradient(135deg, #2A5CAA, #3B8EFF)',
                '&:hover': {
                  background: 'linear-gradient(135deg, #1E437D, #2A5CAA)'
                },
                boxShadow: '0 2px 4px rgba(42, 92, 170, 0.3)'
              }),
              ...(selectedOption !== "inputTopic" && {
                color: '#5C5C5C',
                borderColor: '#5C5C5C',
                '&:hover': {
                  borderColor: '#2A5CAA',
                  color: '#2A5CAA'
                }
              }),
              py: 1.5,
              px: 3,
              fontSize: '1rem',
              fontWeight: 'medium'
            }}
            onClick={() => handleOptionChange("inputTopic")}
            startIcon={<Description />} // 输入主题与要求图标
          >
            输入主题与要求
          </Button>
          <Button
            variant={selectedOption === "importData" ? "contained" : "outlined"}
            sx={{
              ...(selectedOption === "importData" && {
                background: 'linear-gradient(135deg, #2A5CAA, #3B8EFF)',
                '&:hover': {
                  background: 'linear-gradient(135deg, #1E437D, #2A5CAA)'
                },
                boxShadow: '0 2px 4px rgba(42, 92, 170, 0.3)'
              }),
              ...(selectedOption !== "importData" && {
                color: '#5C5C5C',
                borderColor: '#5C5C5C',
                '&:hover': {
                  borderColor: '#2A5CAA',
                  color: '#2A5CAA'
                }
              }),
              py: 1.5,
              px: 3,
              fontSize: '1rem',
              fontWeight: 'medium'
            }}
            onClick={() => handleOptionChange("importData")}
            startIcon={<CloudUpload />} // 导入外部资料图标
          >
            导入外部资料（网络/文件等）
          </Button>
        </Box>

        {/* 第二行：根据选项显示不同内容 */}
        {selectedOption === "inputTopic" && (
          <TextField
            fullWidth
            label="请输入主题与要求"
            variant="outlined"
            value={inputText}
            onChange={(e) => setInputText(e.target.value)}
            sx={{ 
              mt: 2, 
              mb: 2,
              '& .MuiOutlinedInput-root': {
                '& fieldset': {
                  borderColor: 'rgba(42, 92, 170, 0.3)',
                },
                '&:hover fieldset': {
                  borderColor: '#2A5CAA',
                },
                '&.Mui-focused fieldset': {
                  borderColor: '#2A5CAA',
                  borderWidth: '2px',
                },
              },
              '& .MuiInputLabel-root.Mui-focused': {
                color: '#2A5CAA',
              },
              '& .MuiInputBase-input': {
                color: '#5C5C5C',
                fontSize: '1rem',
                padding: '14px 16px',
              }
            }}
          />
        )}

        {selectedOption === "importData" && (
          <>
            {/* 四个按钮 */}
            <Box sx={{ display: "flex", gap: 2, flexWrap: 'wrap', mb: 3, mt: 2 }}>
              <Button
                variant={importOption === "inputText" ? "contained" : "outlined"}
                sx={{
                  ...(importOption === "inputText" && {
                    background: 'linear-gradient(135deg, #2A5CAA, #3B8EFF)',
                    '&:hover': {
                      background: 'linear-gradient(135deg, #1E437D, #2A5CAA)'
                    },
                    boxShadow: '0 2px 4px rgba(42, 92, 170, 0.3)'
                  }),
                  ...(importOption !== "inputText" && {
                    color: '#5C5C5C',
                    borderColor: '#5C5C5C',
                    '&:hover': {
                      borderColor: '#2A5CAA',
                      color: '#2A5CAA'
                    }
                  }),
                  py: 1,
                  px: 2
                }}
                onClick={() => handleImportOptionChange("inputText")}
                startIcon={<TextFields />}
              >
                输入文本
              </Button>
              <Button
                variant={importOption === "uploadFile" ? "contained" : "outlined"}
                sx={{
                  ...(importOption === "uploadFile" && {
                    background: 'linear-gradient(135deg, #2A5CAA, #3B8EFF)',
                    '&:hover': {
                      background: 'linear-gradient(135deg, #1E437D, #2A5CAA)'
                    },
                    boxShadow: '0 2px 4px rgba(42, 92, 170, 0.3)'
                  }),
                  ...(importOption !== "uploadFile" && {
                    color: '#5C5C5C',
                    borderColor: '#5C5C5C',
                    '&:hover': {
                      borderColor: '#2A5CAA',
                      color: '#2A5CAA'
                    }
                  }),
                  py: 1,
                  px: 2
                }}
                onClick={() => handleImportOptionChange("uploadFile")}
                startIcon={<UploadFile />}
              >
                上传文件
              </Button>
              <Button
                variant={importOption === "inputUrl" ? "contained" : "outlined"}
                sx={{
                  ...(importOption === "inputUrl" && {
                    background: 'linear-gradient(135deg, #2A5CAA, #3B8EFF)',
                    '&:hover': {
                      background: 'linear-gradient(135deg, #1E437D, #2A5CAA)'
                    },
                    boxShadow: '0 2px 4px rgba(42, 92, 170, 0.3)'
                  }),
                  ...(importOption !== "inputUrl" && {
                    color: '#5C5C5C',
                    borderColor: '#5C5C5C',
                    '&:hover': {
                      borderColor: '#2A5CAA',
                      color: '#2A5CAA'
                    }
                  }),
                  py: 1,
                  px: 2
                }}
                onClick={() => handleImportOptionChange("inputUrl")}
                startIcon={<Link />}
              >
                输入网页地址
              </Button>
              <Button
                variant={importOption === "importOutline" ? "contained" : "outlined"}
                sx={{
                  ...(importOption === "importOutline" && {
                    background: 'linear-gradient(135deg, #2A5CAA, #3B8EFF)',
                    '&:hover': {
                      background: 'linear-gradient(135deg, #1E437D, #2A5CAA)'
                    },
                    boxShadow: '0 2px 4px rgba(42, 92, 170, 0.3)'
                  }),
                  ...(importOption !== "importOutline" && {
                    color: '#5C5C5C',
                    borderColor: '#5C5C5C',
                    '&:hover': {
                      borderColor: '#2A5CAA',
                      color: '#2A5CAA'
                    }
                  }),
                  py: 1,
                  px: 2
                }}
                onClick={() => handleImportOptionChange("importOutline")}
                startIcon={<List />}
              >
                导入大纲
              </Button>
            </Box>

            {/* 动态显示输入框 */}
            {importOption === "inputText" && (
              <TextField
                fullWidth
                label="请输入文本"
                variant="outlined"
                multiline
                rows={4}
                value={inputText}
                onChange={(e) => setInputText(e.target.value)}
                sx={{ 
                  mb: 2, 
                  mt: 2,
                  '& .MuiOutlinedInput-root': {
                    '& fieldset': {
                      borderColor: 'rgba(42, 92, 170, 0.3)',
                    },
                    '&:hover fieldset': {
                      borderColor: '#2A5CAA',
                    },
                    '&.Mui-focused fieldset': {
                      borderColor: '#2A5CAA',
                      borderWidth: '2px',
                    },
                  },
                  '& .MuiInputLabel-root.Mui-focused': {
                    color: '#2A5CAA',
                  },
                  '& .MuiInputBase-input': {
                    color: '#5C5C5C',
                  }
                }}
              />
            )}

            {importOption === "inputUrl" && (
              <TextField
                fullWidth
                label="请输入网页地址"
                variant="outlined"
                value={inputText}
                onChange={(e) => setInputText(e.target.value)}
                sx={{ 
                  mb: 2, 
                  mt: 2,
                  '& .MuiOutlinedInput-root': {
                    '& fieldset': {
                      borderColor: 'rgba(42, 92, 170, 0.3)',
                    },
                    '&:hover fieldset': {
                      borderColor: '#2A5CAA',
                    },
                    '&.Mui-focused fieldset': {
                      borderColor: '#2A5CAA',
                      borderWidth: '2px',
                    },
                  },
                  '& .MuiInputLabel-root.Mui-focused': {
                    color: '#2A5CAA',
                  },
                  '& .MuiInputBase-input': {
                    color: '#5C5C5C',
                  }
                }}
              />
            )}
          </>
        )}
      </SectionPaper>

      {/* 更多生成要求 */}
      <SectionPaper sx={{ 
        backgroundColor: 'rgba(248, 249, 255, 0.7)',
      }}>
        <Button
          variant="text"
          sx={{ 
            color: '#2A5CAA', 
            cursor: "pointer", 
            mb: 2,
            fontWeight: 'medium',
            '&:hover': {
              backgroundColor: 'rgba(42, 92, 170, 0.05)'
            }
          }}
          onClick={toggleMoreOptions}
          endIcon={
            showMoreOptions ? (
              <KeyboardArrowRight sx={{ verticalAlign: "middle" }} />
            ) : (
              <KeyboardArrowDown sx={{ verticalAlign: "middle" }} />
            )
          }
        >
          更多生成要求
        </Button>

        {showMoreOptions && (
          <Box sx={{ mb: 2 }}>
            <TextField
              fullWidth
              size={"small"}
              label="请输入更多要求"
              variant="outlined"
              value={moreOptions.moreRequirement}
              onChange={(e) =>
                setMoreOptions({ ...moreOptions, moreRequirement: e.target.value })
              }
              sx={{ 
                mb: 3,
                '& .MuiOutlinedInput-root': {
                  '& fieldset': {
                    borderColor: 'rgba(42, 92, 170, 0.3)',
                  },
                  '&:hover fieldset': {
                    borderColor: '#2A5CAA',
                  },
                  '&.Mui-focused fieldset': {
                    borderColor: '#2A5CAA',
                    borderWidth: '2px',
                  },
                },
                '& .MuiInputLabel-root.Mui-focused': {
                  color: '#2A5CAA',
                },
                '& .MuiInputBase-input': {
                  color: '#5C5C5C',
                }
              }}
            />
            {/* 大纲篇幅选择 */}
            <Box sx={{ display: "flex", alignItems: "center", gap: 2, mb: 2 }}>
              <Typography variant="body1" sx={{ color: '#5C5C5C', fontWeight: 'medium' }}>大纲篇幅:</Typography>
              <Select
                size={'small'}
                value={moreOptions.outlineLength}
                onChange={(e) =>
                  setMoreOptions({ ...moreOptions, outlineLength: e.target.value })
                }
                displayEmpty
                sx={{
                  my: 1,
                  minWidth: 200,
                  '& .MuiOutlinedInput-root': {
                    '& fieldset': {
                      borderColor: 'rgba(42, 92, 170, 0.3)',
                    },
                  },
                  '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
                    borderColor: '#2A5CAA',
                    borderWidth: '2px',
                  },
                  '& .MuiSelect-select': {
                    color: '#5C5C5C',
                  }
                }}
              >
                <MenuItem value="" disabled>
                  请选择
                </MenuItem>
                <MenuItem value="short">较短 10-15 页</MenuItem>
                <MenuItem value="regular">常规 20-30 页</MenuItem>
                <MenuItem value="long">更长 25-35 页</MenuItem>
              </Select>
            </Box>
            {/* 下拉框和文本提示 */}
            <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
              <Typography variant="body1" sx={{ color: '#5C5C5C', fontWeight: 'medium' }}>选择语言:</Typography>
              <Select
                size={"small"}
                value={moreOptions.language}
                onChange={(e) =>
                  setMoreOptions({ ...moreOptions, language: e.target.value })
                }
                displayEmpty
                sx={{
                  my: 1,
                  minWidth: 200,
                  '& .MuiOutlinedInput-root': {
                    '& fieldset': {
                      borderColor: 'rgba(42, 92, 170, 0.3)',
                    },
                  },
                  '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
                    borderColor: '#2A5CAA',
                    borderWidth: '2px',
                  },
                  '& .MuiSelect-select': {
                    color: '#5C5C5C',
                  }
                }}
              >
                <MenuItem value="" disabled>
                  请选择
                </MenuItem>
                <MenuItem value="zh-CN">中文</MenuItem>
                <MenuItem value="en">英文</MenuItem>
              </Select>
            </Box>
          </Box>
        )}
      </SectionPaper>

      <Grid container justifyContent="center" sx={{ mt: 4 }}>
        <Grid item>
          <Button
            variant="contained"
            onClick={handleGenerateOutline}
            startIcon={<PlayCircleFilled />}
            sx={{
              background: 'linear-gradient(135deg, #2A5CAA, #3B8EFF)',
              '&:hover': {
                background: 'linear-gradient(135deg, #1E437D, #2A5CAA)'
              },
              boxShadow: '0 2px 8px rgba(42, 92, 170, 0.3)',
              py: 1.5,
              px: 4,
              fontSize: '1.1rem',
              fontWeight: 'bold',
              textTransform: 'none',
              borderRadius: '8px',
              minWidth: '180px'
            }}
          >
            立即生成
          </Button>
        </Grid>
      </Grid>
    </Box>
  )
}

export default StepOneInputData
